﻿@using viBook.Models
@model User
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Content/UserHome_Scrb/web.css" rel="stylesheet" type="text/css" />
<h2>
    User homepage</h2>
<div class="container">
    <div class="span-5">
        <img style="width: 100px; height: 100px" alt="@User.Identity.Name avatar"  src="#"/>
        <ul>
            <li>@Html.ActionLink("Uploaded Books", "Index", "Account")</li>
            <li>@Html.ActionLink("Profile", "Index", "Account")</li>
            <li>@Html.ActionLink("Bookmarks", "Index", "Account")</li>
            <li>@Html.ActionLink("Activities", "Index", "Account")</li>
        </ul>
    </div>
    <div class="span-19 last">
            @Html.ActionLink("BookShelf", "Index", "Books")
            
        <h2>@User.Identity.Name 's uploaded book</h2>
        @if (Model.UploadedBooks.Count() == 0)
        {
            <p>
                You havent uploaded any book.
                @Html.ActionLink("Click here", "Create", "Books")
                to upload a new book.
            </p>
        }
        else
        {
            @Html.ActionLink("Upload a new book", "Create", "Books")
            <div class="spotlight">
                <h2>
                    Uploaded books</h2>
                <div class="content_module content_module_centered six_thumbnails clearfix" data-bind='template: { name: "book-template", foreach: uploadedBooks }' id="uploaded-book">
                </div>
            </div>
        }
    </div>
</div>
<script id='book-template' type="text/html">
    <div class="content_module_document ">
        <div class="document_thumbnail">
            <div class="standard_thumbnail" style="width: 135px">
                <div class="standard_thumbnail_shadow">
                    <a data-bind="attr: { href:'/Books/Details/'+id}">
                        <div class="thumbnail">
                            <img data-bind="attr: { src:coverImage}">
                                <span class="no_of_pages" data-bind="visible: hasChapter==false, text: numberOfPages+' p.'"></span>
                                <span class="no_of_pages" data-bind="visible: hasChapter==true, text: numberOfChapters+' c.'"></span>
                            </img>
                        </div>
                    </a>
                </div>
            </div>
            <h4>
                <a data-bind="attr: { href:'/Books/Details/'+id, title: title, id:'uploaded_book_'+id, title:title}">
                    <span data-bind="text: title"></span>
                </a>
            </h4>
        </div>
        <p>
        <span data-bind="text: numberOfViews+' Reads'"></span>
        <br/>
        <span data-bind="text: numberOfLikes+' Likes'"></span>
        <br/>
        <span data-bind="text: numberOfViews+' Comments'"></span>
    </div>
</script>
<script type="text/javascript">
function Book(id, title, coverImage, hasChapter, numberOfPages, numberOfChapters, numberOfLikes, numberOfViews, numberOfComments) {
    return {
        id: id,
        title: title,
        coverImage: coverImage,
        hasChapter: hasChapter,
        numberOfPages: numberOfPages,
        numberOfChapters: numberOfChapters,
        numberOfLikes: numberOfLikes,
        numberOfViews: numberOfViews,
        numberOfComments: numberOfComments
    };
}

var books = @CustomHelpers.BooksToJavaScriptConverter(Model.UploadedBooks.ToList()) ,
    viewmodel = {
        uploadedBooks: ko.observableArray(books),
        currentPage:ko.observable(1),
        getNextPage: function() {
            
        },
        getPrevPage: function() {
            
        }
    };
ko.applyBindings(viewmodel);
</script>
